<template>
  <el-dialog
    :v-if="isShow"
    :title="paramsForm.id?'编辑':'新增'"
    :visible.sync="isShow"
    :append-to-body="true"
  >
    <el-form
      ref="paramsForm"
      :model="paramsForm"
      :rules="FormRules"
      label-width="100px"
    >
      <el-form-item
        label="上级机构"
        prop="parentName"
      >
        <el-input
          v-model="paramsForm.parentName"
          disabled
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="机构名称"
        prop="name"
      >
        <el-input
          v-model="paramsForm.name"
          autocomplete="off"
          placeholder="请输入机构名称"
          clearable
        />
      </el-form-item>
      <el-form-item
        label="机构全称"
        prop="fullName"
      >
        <el-input
          v-model="paramsForm.fullName"
          v-support
          autocomplete="off"
          placeholder="请输入机构全称，默认为机构简称"
          clearable
        />
      </el-form-item>
      <el-form-item
        label="机构类型"
        prop="type"
      >
        <el-select
          v-model="paramsForm.type"
          placeholder="请选择"
          @change="changeCategory()"
        >
          <el-option
            v-for="dict in dict.type.org_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="授权域名"
        prop="realmName"
      >
        <el-input
          v-model="paramsForm.realmName"
          v-support
          autocomplete="off"
          placeholder="请输入授权域名(仅限小写字母)"
          clearable
          oninput="this.value=this.value.replace(/[^a-z]/g,'')"
        />
      </el-form-item>
      <el-form-item
        label="公司logo"
        prop="imgLogoPath"
      >
        <el-upload
          class="avatar-uploader"
          :action="importUrl"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
          accept=".png"
        >
          <el-image
            v-if="paramsForm.imgLogoPath"
            :src="paramsForm.imgLogoPath"
            class="avatar"
            style="width: 108px;height: 33px;"
          />
          <i
            v-else
            class="el-icon-plus avatar-uploader-icon"
          />
        </el-upload>
      </el-form-item>
      <el-form-item
        label="机构排序"
        prop="orderNum"
      >
        <el-input-number
          v-model="paramsForm.orderNum"
          :step="1"
          :min="0"
          :max="30000"
        />
      </el-form-item>
      <el-form-item label="高级">
        <el-switch v-model="advanceShow" />
      </el-form-item>

      <template v-if="advanceShow">
        <el-form-item
          label="负责人"
          prop="principal"
        >
          <el-input
            v-model="paramsForm.principal"
            v-support
            autocomplete="off"
            placeholder="请输入负责人信息"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="联系方式"
          prop="contact"
        >
          <el-input
            v-model="paramsForm.contact"
            v-support
            autocomplete="off"
            placeholder="请输入负责人联系方式"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="联系地址"
          prop="address"
        >
          <el-input
            v-model="paramsForm.address"
            autocomplete="off"
            placeholder="请输入负责人联系地址"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="电子邮箱"
          prop="email"
        >
          <el-input
            v-model="paramsForm.email"
            autocomplete="off"
            placeholder="请输入负责人电子邮箱"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="邮政编码"
          prop="zipCode"
        >
          <el-input
            v-model="paramsForm.zipCode"
            autocomplete="off"
            placeholder="请输入机构邮政编码"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="公司官网"
          prop="officialWebsite"
        >
          <el-input
            v-model="paramsForm.officialWebsite"
            autocomplete="off"
            placeholder="请输入公司官网"
            clearable
          />
        </el-form-item>
      </template>

      <el-form-item
        label="机构备注"
        prop="remark"
      >
        <el-input
          v-model="paramsForm.remark"
          v-support
          type="textarea"
          :rows="2"
          autocomplete="off"
          placeholder="请输入机构备注"
          clearable
        />
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="cancelSubmit"
      >取消</el-button>
      <el-button
        type="primary"
        :loading="comfirmLoading"
        @click="submitForm"
      >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
let validateRealmName = (rule, value, callback) => {//检车域名合法性
    $gc.orgService.validateOrgRepeat({
    userId:this.dataForm.id,
    realName:this.dataForm.realName
    }).then(repeat => {
    if (repeat.code == 500) {
        callback(new Error('该域名已使用'))
    } else {
        callback()
    }
    }).catch(err => {
    callback(new Error(err))
    // eslint-disable-next-line no-console
    console.error(err)
    })
}
let rules = {
    name: [
    { required: true, message: '机构名称不能为空', trigger: 'blur' },
    { min: 1, max: 100, message: '机构名称长度必须在1~100之间', trigger: 'blur' }
    // { validator: validateOrgNameRepeat, trigger: 'blur' }
    ],
    fullName: [
    { max: 100, message: '机构全名长度不能超过100', trigger: 'blur' }
    // { validator: validateOrgFullNameRepeat, trigger: 'blur' }
    ],
    type: [
    { required: true, message: '机构类型不能为空', trigger: 'blur' }
    ],
    category: [
    { required: true, message: '机构子类型不能为空', trigger: 'blur' }
    ],
    realmName: [
    { required: true, message: '域名不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '域名长度不能超过50', trigger: 'blur' },
    { validator: validateRealmName, trigger: 'blur' }
    ],
    principal: [
    { max: 100, message: '负责人长度不能超过100', trigger: 'blur' }
    ],
    contact: [
    { pattern: window.SITE_CONFIG.starter.validator.org.contact.rule, message: window.SITE_CONFIG.starter.validator.org.contact.message, trigger: 'blur' },
    { max: 100, message: '联系方式长度不能超过100', trigger: 'blur' }
    ],
    email: [
    { pattern: window.SITE_CONFIG.starter.validator.org.email.rule, message: window.SITE_CONFIG.starter.validator.org.email.message, trigger: 'blur' },
    { max: 100, message: '电子邮箱长度不能超过100', trigger: 'blur' }
    ],
    address: [
    { max: 100, message: '联系地址长度不能超过100', trigger: 'blur' }
    ],
    zipCode: [
    { max: 10, message: '邮政编码长度不能超过10', trigger: 'blur' }
    ],
    officialWebsite: [{ max: 512, message: '公司官网长度不能超过512', trigger: 'blur' }],
    remark: [{ max: 200, message: '备注长度不能超过200', trigger: 'blur' }]
}
export default {
    dicts: ['sys_normal_disable', 'org_nature','org_type'],
    data() {
        return {
            isShow:true,//是否展示
            paramsForm:{},
            paramsForm: {//请求参数
                id: undefined,
                name: '',
                parentName: '',
                fullName: '',
                code: '',
                type: '',
                category: '',
                nature: '1',
                parentId: '',
                realmName: '',
                imgLogoPath: '',
                orderNum: 10,
                principal: '',
                contact: '',
                address: '',
                zipCode: '',
                email: '',
                remark: '',
                officialWebsite: ''
            },
            formRules: rules,
            importUrl:"",
            advanceShow:"",//高级显示
            comfirmLoading:false,
        }
    },
    methods:{
        changeCategory(){},
        uploadSuccess(){},
        beforeUpload() {},
        submitForm() {},
        cancelSubmit(){},
    }
}
</script>
<style lang="scss" scoped>
    
</style>